<template>
    <view>
        <!-- 背景图 -->
        <view class="album_bg">
            <image mode="widthFix" :src="album.cover"/>
            <view class="album_info">
                <view class="album_name">
                    {{album.name}}
                </view>
                <view class="album_atten">
                    关注专辑
                </view>
            </view>
        </view>
        <!-- 专辑 作者 -->
        <view class="album_user">
            <view class="album_info">
                <image mode="widthFix" :src="album.user.avatar"/>
                <view class="album_name">{{album.user.name}}</view>
            </view>
            <view class="album_desc">
                <!-- view不能识别换行符 -->
                <text>{{album.desc}}</text> 
            </view>
        </view>
        <!-- 专辑 列表 -->
        <view class="album_list">
            <view class="album_item"
            v-for="(item,index) in wallpaper"
            :key="item.id">
                <go-detail :list="wallpaper" :index="index">
                    <image mode="aspectFill" :src="item.thumb+item.rule.replace('$<Height>',360)"/>
                </go-detail>
            </view>
        </view>
    </view>
</template>

<script>
import goDetail from "@/components/goDetail";
export default {
    components:{
        goDetail
    },
    data(){
        return{
            params:{
                limit:30,
                order:'new',
                skip:0,
                // 1 返回值中有album对象，表示第一次请求数据
                //0 返回值中只有wallpaper数组 不是第一次请求数据
                first:1
            },
            id:-1,
            // 专辑信息
            album:{},
            // “专辑” 列表
            wallpaper:[],
            hasMore:true
        }
    },
    onLoad(options){
        this.id = options.id;
        this.getList();
    },
    methods: {
       getList(){
           this.request({
           url:`http://157.122.54.189:9088/image/v1/wallpaper/album/${this.id}/wallpaper`,
           data:this.params
            })
            .then(result=>{
                // console.log(result);
                // Object.keys判断对象的属性
                if(Object.keys(this.album).length === 0){
                    this.album = result.res.album;
                }
                if(result.res.wallpaper.length === 0){
                    this.hasMore=false;
                    uni.showToast({
                    title:"没有更多数据了",
                    icon:"none"
                    });
                    return;
                }
                this.wallpaper = [...this.wallpaper,...result.res.wallpaper];
            })

       }
   },
    // 上拉加载事件 下一页
    onReachBottom(){
        if(this.hasMore){
            this.params.skip += this.params.limit;
            this.getList();
        }else{
            uni.showToast({
                title:"没有更多数据了",
                icon:"none"
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .album_bg{
        position:relative;
        .album_info{
            position:absolute;
            left:0;
            bottom:0;
            width:100%;
            height:80rpx;
            color:#fff;
            display:flex;
            justify-content:space-between;
            align-items: center;
            padding:0 20rpx;
            .album_name{
                font-size:34rpx;
            }
            .album_atten{
                width:152rpx;
                height:60rpx;
                line-height:60rpx;
                background:$color;           
                text-align: center;
                border-radius:8rpx;
            }
        }
    }
    .album_user{
        padding:10rpx;
        .album_info{
            padding:10rpx 0;
            display:flex;
            image{
                width:50rpx;   
            }
            .album_name{
                color:#000;
                font-weight:600;
                margin-left:30rpx;
            }
        }
    }
    .album_list{
        display:flex;
        flex-wrap:wrap;
        .album_item{
            width:33.33%;
            border:3rpx solid #fff;
            image{
                height:160rpx;
            }
        }
    }
</style>